<script setup>
import { forgetPassword } from '@/api/login';
import router from '@/router';
import { ref } from 'vue'
import { ElMessage } from 'element-plus';

// 数据声明
const active = ref(0)
const form = ref({
  phone: '',
  password: '',
  new_password: ''
})
const code = ref('')

// 手机验证码
function sendCode() {
  code.value = Math.floor(100000 + Math.random() * 900000).toString();
}

// 设置新密码
function savePwd() {
  if (form.value.new_password != form.value.password) {
    ElMessage.error('两次密码不一致，请重新输入密码')
    return
  }
  let data = {
    phone: form.value.phone,
    password: form.value.password
  }
  console.log(data);
  
  forgetPassword(data).then(res => {
    console.log(res)
    if (res.code === 0) {
      next()
    } else {
      ElMessage.error("请重新设置密码" || res.message)
    }
  })
}

const next = () => {
  active.value++;
  console.log(active.value);
  if (active.value == 2) {
    setTimeout(() => {
      router.push('/login')
    }, 1200)
  }
}
</script>


<template>
    <header class="login-header">
        <div class="container m-top-20">
        <h1 class="logo">
            <RouterLink to="/"></RouterLink>
        </h1>
        <RouterLink class="entry" to="/">
            进入网站首页
            <i class="iconfont icon-angle-right"></i>
            <i class="iconfont icon-angle-right"></i>
        </RouterLink>
        </div>
    </header>
    
    <div class="container">
    <el-steps style="max-width: 600px; margin: 0 auto;margin-top: 20px;" :active="active" finish-status="success">
      <el-step title="身份验证" />
      <el-step title="设置新密码" />
      <el-step title="修改成功" />
    </el-steps>

    <div v-if="active===0" class="forgetpw"> 
      <el-input v-model="form.phone" placeholder="请输入手机号" clearable class="phone"/>
      <el-input v-model="code" placeholder="请输入验证码" clearable class="code"/>
      <el-button type="primary" @click="sendCode" class="send">发送验证码</el-button>
    </div>

    <div v-if="active===1" class="forgetpw"> 
      <el-input v-model="form.password" placeholder="请输入新密码" clearable type="password" show-password class="phone"/>
      <el-input v-model="form.new_password" placeholder="请确认新密码" clearable type="password" show-password class="code"/>
      <el-button type="primary" @click="savePwd" class="send">设置新密码</el-button>
    </div>

    <div v-if="active===2" class="forgetpw"> 
      <span class="iconfont icon-queren2 green"></span>
      <p style="font-size: large;">修改密码成功，即将跳转登录，请重新登录</p>
    </div>

    <el-button v-if="active===0 || active===1" class="next" @click="next">下一步</el-button>
  </div>

    <footer class="login-footer">
        <div class="container">
        <p>
            <a href="javascript:;">关于我们</a>
            <a href="javascript:;">帮助中心</a>
            <a href="javascript:;">售后服务</a>
            <a href="javascript:;">配送与验收</a>
            <a href="javascript:;">商务合作</a>
            <a href="javascript:;">搜索推荐</a>
            <a href="javascript:;">友情链接</a>
        </p>
        <p>CopyRight &copy; 桃禧-服装采购商贸系统</p>
        </div>
    </footer>
</template>
  
<style scoped lang="scss">
.forgetpw {
  margin-top: 40px;
  margin-left: 40%;
  margin-bottom: 50px;
  display: flex;
  flex-direction: column;

  .phone {
    margin-top: 20px;
    width: 250px;
  }
  .code {
    margin-top: 20px;
    width: 160px;
  }

  .send {
    margin-top: -32px;
    margin-left: 170px;
    width: 80px;
  }
}
.next {
  width: 150px;
  margin-left: 40%;
  margin-bottom: 100px;
}

.iconfont {
  font-size: 100px;
}
.green {
  color: #1dc779;
}

.login-header {
    background: #fff;
    border-bottom: 1px solid #e4e4e4;
  
    .container {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
    }
  
    .logo {
      width: 200px;
  
      a {
        display: block;
        height: 132px;
        width: 100%;
        text-indent: -9999px;
        background: url("@/assets/images/logo.png") no-repeat center 10px / contain;
      }
    }
  
    .sub {
      flex: 1;
      font-size: 24px;
      font-weight: normal;
      margin-bottom: 38px;
      margin-left: 20px;
      color: #666;
    }
  
    .entry {
      width: 120px;
      margin-bottom: 38px;
      font-size: 16px;
  
      i {
        font-size: 14px;
        color: $xtxColor;
        letter-spacing: -5px;
      }
    }
  }


  .login-footer {
  padding: 30px 0 50px;
  background: #fff;

  p {
    text-align: center;
    color: #999;
    padding-top: 20px;

    a {
      line-height: 1;
      padding: 0 10px;
      color: #999;
      display: inline-block;

      ~a {
        border-left: 1px solid #ccc;
      }
    }
  }
}

</style>